<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>软件园商城</title>
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
	<style type="text/css">
		/* Chart.js */
		@-webkit-keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		@keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		.chartjs-render-monitor {
			-webkit-animation: chartjs-render-animation 0.001s;
			animation: chartjs-render-animation 0.001s;
		}
		/* 自定义分页样式 */
		.page-link {
			transition: all 0.3s ease;
			border: 1px solid #dee2e6;
			margin: 0 3px;
			border-radius: 8px !important;
		}

		.page-link:hover {
			background-color: #e9ecef;
			transform: translateY(-2px);
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		}

		.page-item.disabled .page-link {
			opacity: 0.6;
			pointer-events: none;
		}

		.page-item.active .page-link {
			background-color: #0d6efd;
			border-color: #0d6efd;
			color: white !important;
		}

		.bi {
			vertical-align: middle;
		}

	</style>
</head>

<body>
<!-- 顶部导航 -->
<div th:replace="~{topleft::topnav}"></div>
<div class="container-fluid">
	<div class="row">
		<!-- 左边内容 -->
		<div th:replace="~{topleft::#sidebarMenu(lurl='leftuser')}"></div>
		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2><a class="btn btn-success btn-sm" href="#" th:href="@{'/toAddUser'}">添加用户</a></h2>
			<!-- 在表格上方添加批量操作按钮 -->
			<div class="mb-3">
				<button type="button" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md" id="batchDeleteBtn">批量删除</button>
			</div>
			<form action="" th:href="@{/getUserList}" method="get">
				<input type="text" name="name" placeholder="输入姓名" th:value="${name}">
				<input type="number" name="age" placeholder="输入年龄" th:value="${age}">
				<button type="submit">搜索</button>
			</form>
			<div class="table-responsive">
				<table class="table table-sm table-hover table-bordered">
					<thead>
					<tr>
						<!-- 在表头添加全选复选框 -->
						<th class="border border-gray-300 p-2"><input type="checkbox" id="checkAll"></th>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>电话</th>
						<th>邮箱</th>
						<th>密码</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="user:${pageInfo.list}">
						<td class="border border-gray-300 p-2"><input type="checkbox" name="ids" th:value="${user.id}" class="checkItem"></td>
						<td th:text="${user.id}"></td>
						<td th:text="${user.name}"></td>
						<td th:text="${user.age}"></td>
						<td th:text="${user.number}"></td>
						<td th:text="${user.u_email}"></td>
						<td th:text="${user.password}"></td>
						<td class="center">
							<a class="btn btn-success btn-sm" href="#" th:href="@{'/FindUser/'+${user.id}}">查看</a>
							<a class="btn btn-info btn-sm" href="#" th:href="@{'/toUpdate/'+${user.id}}">修改</a>
							<a class="btn btn-danger btn-sm" href="#" th:href="@{'/delUser/'+${user.id}}">删去</a>
						</td>
					</tr>
					</tbody>
				</table>
				<nav aria-label="Page navigation" class="mt-4">
					<ul class="pagination justify-content-center">
						<!-- 首页 -->
						<li class="page-item">
							<a class="page-link text-primary"
							   th:href="@{/getUserList(pageNum=1, pageSize=${pageInfo.pageSize})}"
							   style="min-width: 80px;">
								<i class="bi bi-chevron-double-left me-1"></i>首页
							</a>
						</li>

						<!-- 上一页 -->
						<li class="page-item" th:classappend="${not pageInfo.hasPreviousPage} ? 'disabled'">
							<a class="page-link"
							   th:href="@{/getUserList(pageNum=${pageInfo.prePage}, pageSize=${pageInfo.pageSize})}"
							   th:disabled="${not pageInfo.hasPreviousPage}"
							   aria-disabled="true"
							   style="min-width: 100px;">
								<i class="bi bi-chevron-left me-1"></i>上一页
							</a>
						</li>

						<!-- 当前页指示 -->
						<li class="page-item disabled">
                                    <span class="page-link text-dark bg-light border-0">
                                        第 <span th:text="${pageInfo.pageNum}" class="fw-bold text-primary"></span> 页 /
                                        共 <span th:text="${pageInfo.pages}" class="fw-bold text-success"></span> 页
                                    </span>
						</li>

						<!-- 下一页 -->
						<li class="page-item" th:classappend="${not pageInfo.hasNextPage} ? 'disabled'">
							<a class="page-link"
							   th:href="@{/getUserList(pageNum=${pageInfo.nextPage}, pageSize=${pageInfo.pageSize})}"
							   th:disabled="${not pageInfo.hasNextPage}"
							   aria-disabled="true"
							   style="min-width: 100px;">
								下一页<i class="bi bi-chevron-right ms-1"></i>
							</a>
						</li>

						<!-- 尾页 -->
						<li class="page-item">
							<a class="page-link text-primary"
							   th:href="@{/getUserList(pageNum=${pageInfo.pages}, pageSize=${pageInfo.pageSize})}"
							   style="min-width: 80px;">
								尾页<i class="bi bi-chevron-double-right ms-1"></i>
							</a>
						</li>
					</ul>
				</nav>
			</div>
			<span><p align="center" style="color: red" th:text="${msg==''?'':msg}"></p></span>
			<script th:inline="javascript">
				document.addEventListener('DOMContentLoaded', function() {
					const msg = /*[[${msg}]]*/ '';
					if (msg) {
						Swal.fire({
							title: '系统提示',
							text: msg,
							icon: 'info',
							confirmButtonText: '确定'
						});
					}
					// 从 localStorage 中获取已勾选的 ID
					let selectedIds = JSON.parse(localStorage.getItem('selectedIds')) || [];

					// 页面加载时，根据 selectedIds 勾选对应的复选框
					const checkboxes = document.querySelectorAll('.checkItem');
					checkboxes.forEach(function(checkbox) {
						if (selectedIds.includes(checkbox.value)) {
							checkbox.checked = true;
						}
					});

					// 全选复选框事件处理
					document.getElementById('checkAll').addEventListener('change', function(e) {
						checkboxes.forEach(function(checkbox) {
							checkbox.checked = e.target.checked;
							if (e.target.checked) {
								if (!selectedIds.includes(checkbox.value)) {
									selectedIds.push(checkbox.value);
								}
							} else {
								const index = selectedIds.indexOf(checkbox.value);
								if (index > -1) {
									selectedIds.splice(index, 1);
								}
							}
						});
						// 更新 localStorage
						localStorage.setItem('selectedIds', JSON.stringify(selectedIds));
					});

					// 单个复选框事件处理
					checkboxes.forEach(function(checkbox) {
						checkbox.addEventListener('change', function() {
							if (this.checked) {
								if (!selectedIds.includes(this.value)) {
									selectedIds.push(this.value);
								}
							} else {
								const index = selectedIds.indexOf(this.value);
								if (index > -1) {
									selectedIds.splice(index, 1);
								}
							}
							// 更新 localStorage
							localStorage.setItem('selectedIds', JSON.stringify(selectedIds));
						});
					});

					// 批量删除按钮事件处理
					document.getElementById('batchDeleteBtn').addEventListener('click', function() {
						if (selectedIds.length === 0) {
							Swal.fire({
								title: '提示',
								text: '请选择要删除的用户！',
								icon: 'warning',
								confirmButtonText: '确定'
							});
							return;
						}
						Swal.fire({
							title: '确认删除',
							text: '你确定要删除选中的用户吗？',
							icon: 'warning',
							showCancelButton: true,
							confirmButtonText: '确定',
							cancelButtonText: '取消'
						}).then((result) => {
							if (result.isConfirmed) {
								var form = document.createElement('form');
								form.method = 'post';
								form.action = [[@{/batchDelete}]];
									selectedIds.forEach(function(id) {
										var input = document.createElement('input');
										input.type = 'hidden';
										input.name = 'ids';
										input.value = id;
										form.appendChild(input);
									});
								document.body.appendChild(form);
								form.submit();
								// 清空 localStorage
								localStorage.removeItem('selectedIds');
							}
							});
						});
					});
			</script>
		</main>
	</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="js/jquery-3.2.1.slim.min.js" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 引入库 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Icons -->
<script type="text/javascript" src="js/feather.min.js" th:src="@{/js/feather.min.js}"></script>
<script>
	feather.replace()
</script>

<!-- Graphs -->
<script type="text/javascript" src="js/Chart.min.js"></script>
<script>
	var ctx = document.getElementById("myChart");
	var myChart = new Chart(ctx, {
		type: 'line',
		data: {
			labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
			datasets: [{
				data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
				lineTension: 0,
				backgroundColor: 'transparent',
				borderColor: '#007bff',
				borderWidth: 4,
				pointBackgroundColor: '#007bff'
			}]
		},
		options: {
			scales: {
				yAxes: [{
					ticks: {
						beginAtZero: false
					}
				}]
			},
			legend: {
				display: false
			}
		}
	});
</script>
</body>
</html>
